<!---
 * @文件名称：  AppMain.vue
 * @包路径：
 * @版权所有： 北京数字医信科技有限公司 (C) 2020
 *
 * @类描述:
 * @版本:       V3.2.0
 * @作者        daizhenhong
 * @创建时间    2020/3/13 2:59 下午
 *
 * @修改记录：
  -----------------------------------------------------------------------------------------------
   ----------- 时间      |   修改人    |     修改的方法       |         修改描述   ---------------
  -----------------------------------------------------------------------------------------------
-->
<template>
  <el-container class="container">
    <el-header style="height: 50px;">
      <el-col class="topbar-wrap">
        <div class="topbar-logo topbar-btn">
          <a href=""><img src="../../assets/image/login-bg.jpg" style="padding-left:8px;"></a>
        </div>
        <div class="topbar-logos" v-show="!collapsed">
          <a href="" style="color:#fff;"><p></p></a>
        </div>
        <div class="topbar-title">
<!--          <span style="font-size: 17px;color: #fff;">小树苗</span>-->
        </div>
        <div class="topbar-account topbar-btn">
          <el-row style="font-size: 14px; cursor: pointer; margin-right:10px;" @click.native="onLogout" >退出登录</el-row>
          <!--<el-dropdown trigger="click">-->
          <!--<span class="el-dropdown-link userinfo-inner"><i class="iconfont icon-yonghu"></i>名称地址 <i-->
          <!--class="iconfont icon-down"></i></span>-->
          <!--<el-dropdown-menu slot="dropdown">-->
          <!--&lt;!&ndash; <el-dropdown-item>-->
          <!--<div @click="jumpTo('/user/profile')"><span style="color: #555;font-size: 14px;">个人信息</span></div>-->
          <!--</el-dropdown-item>-->
          <!--<el-dropdown-item>-->
          <!--<div @click="jumpTo('/user/changepwd')"><span style="color: #555;font-size: 14px;">修改密码</span></div>-->
          <!--</el-dropdown-item> &ndash;&gt;-->
          <!--<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>-->
          <!--</el-dropdown-menu>-->
          <!--</el-dropdown>-->
        </div>
      </el-col>
    </el-header>
    <el-container class="main">
        <aside :class="{showSidebar:!collapsed}">
          <SideBar/>
        </aside>
        <el-main class="content-container">
          <keep-alive>
            <!--<div class="content">-->
              <router-view :key="key"/>
            <!--</div>-->
          </keep-alive>
        </el-main>
    </el-container>
  </el-container>

</template>
<!--<template>-->
  <!---->
  <!--<div class="contain">-->
    <!--&lt;!&ndash;<template id="idHeader">&ndash;&gt;-->
      <!--<div class="header">-->
        <!--<div class="title">-->
          <!--<img/>-->
          <!--<span>医网信演示平台</span>-->
        <!--</div>-->
        <!--<el-button class="logout" @click="onLogout">登出</el-button>-->
      <!--</div>-->
    <!--&lt;!&ndash;</template>&ndash;&gt;-->
    <!--<div class="app">-->

      <!--<template>-->
        <!--<aside :class="{showSidebar:!collapsed}">-->
          <!--<SideBar/>-->
        <!--</aside>-->
      <!--</template>-->

      <!--<keep-alive>-->
        <!--<div class="content">-->
          <!--<router-view :key="key"/>-->
        <!--</div>-->
      <!--</keep-alive>-->
    <!--</div>-->
  <!--</div>-->
<!--</template>-->

<script>
import SideBar from './sidebar/SideBar'
import {bus} from '../../bus'

export default {
  name: 'AppMain',
  data() {
    return {
      isCollapse: false,
      userName: 'demoUser',
      defaultActiveIndex: '0',
      nickname: '',
      hosname: '',
      collapsed: false,
    }
  },
  mounted() {
  },
  components: {SideBar},
  computed: {
    key() {
      return this.$route.fullPath
    },
  },
  created() {
    this.defaultActiveIndex = this.$route.path
    bus.$on('setNickName', (text) => {
      this.nickname = text
    })
    // 未登录的判断
    bus.$on('goto', (url) => {
      if (url === '/login') {
        localStorage.removeItem('access-user')
        localStorage.removeItem('access-authType')
      }
      this.$router.push(url)
    })
  },
  methods: {
    onLogout() {
      localStorage.removeItem('token');
      this.$router.push({path: '/login'});
      this.$message.success('退出成功!');
    },
    // 折叠导航栏
    collapse() {
      this.collapsed = !this.collapsed
    },
    handleSelect(index) {
      this.defaultActiveIndex = index
    },
  }
}
</script>

<style lang="less">

  /*.contain {*/
    /*flex-direction: column;*/
    /*flex: 1;*/
    /*padding: 0;*/
    /*margin: 0;*/
    /*height: 100%;*/
    /*display: flex;*/
    /*box-sizing: border-box;*/

    /*.app {*/
      /*flex-direction: row;*/
      /*padding: 0;*/
      /*margin: 0;*/
      /*height: 100%;*/
      /*display: flex;*/
    /*}*/
  /*}*/

  /*.sidebarContain {*/
    /*flex-direction: column;*/
    /*background-color: #646c74;*/
    /*display: flex;*/
    /*height: 100%;*/
  /*}*/

  /*.content {*/
    /*flex: 1;*/
    /*display: flex;*/
    /*background-color: #FFFFFF;*/
  /*}*/

  /*.header {*/
    /*font-size: 1.4rem;*/
    /*width: 100%;*/
    /*flex-direction: row;*/
    /*display: flex;*/
    /*padding: .4rem 1rem;*/
    /*background-color: #009Eff;*/
    /*color: #FFF;*/
    /*box-sizing: border-box;*/

    /*.title {*/
      /*display: flex;*/
      /*flex: 1;*/
    /*}*/

    /*.logout {*/
      /*color: #333;*/
      /*display: flex;*/
      /*flex-direction: row;*/
      /*padding: .2rem 1rem;*/
      /*border-radius: 0.5rem;*/
      /*background-color: #FFF;*/
    /*}*/

  /*}*/

</style>
